import React, { useEffect } from 'react'
import { Button, Form, Input, Card ,message} from 'antd';
import style from '../index.module.css'

import { addHospitalRequest } from '@/api/hospital/hospitalSet'; 
import { addHospitalParamType } from '@/api/hospital/model/hospitalSetTypes';
import { useNavigate, useParams } from 'react-router-dom';
import { getHosSetFromIdRequest,updateHosSetFromIdRequest } from '@/api/hospital/hospitalSet';


export default function AddOrUpdateHosSet() {
    const navigate = useNavigate()
    const {id} = useParams()


    //通过Form组件尚的useForm创建实例可以和 项目中的form进行关联
    const [form] =Form.useForm()
    
    //当时点击更新时 进去页面第一件事 就是判断id 然后获取id的数据
    useEffect(()=>{
        //判断是从点击什么地方进入这个页面的  点击更新的时候才有id为true
        if(id){
            const getHosDetail = async  ()=>{
                    //发送请求
                    const result= await  getHosSetFromIdRequest(id)                 
            //form实例上面有个setFieldsValue方法 可以将关联的form表单关联数据
            form.setFieldsValue(result)
            }
            getHosDetail()

        }
    })

//提交数据发送请求
    const addHosFinishHandle =async (fieldValue:addHospitalParamType)=>{
      if(id){
        await updateHosSetFromIdRequest({ ...fieldValue, id });
        //修改成功以后返回医院设置页面
        navigate("/syt/hospital/hospitalSet")
        message.success('修改数据成功')
      }else{
        await addHospitalRequest(fieldValue)

        //添加成功之后跳到设置医院页面  
        navigate('/syt/hospital/hospitalSet')
        message.success("新增数据成功")
      }
    }

//按返回键后返回到上一层
    const goBackHandle = ()=>{
        navigate(-1)
    }

  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 18 }}
        onFinish = {addHosFinishHandle}

      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{
            required: true,
            message: '请输入医院名称',
            transform(value) {
              return value.trim()
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: 3 }}
        >
          <Button type="primary" htmlType="submit" className={style.mr}  >
            提交
          </Button>
          <Button type="default" htmlType="button" onClick={goBackHandle}>
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
